<template>
  <div>
    <div>
      <el-avatar :size="200"
                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
    </div>
    <span>当前积分:xxxx</span>
    <el-button id="IntegralRecord" type="Default" @click="SelectIntegralRecord()">
      <router-link to="integralrecord">查看积分记录</router-link>
    </el-button>
    <h2>昵称</h2>
    <span>个人介绍:</span>
    <div class="ke">
      <el-input
          v-model="textarea"
          :autosize="{ minRows: 10 }"
          maxlength="200"
          placeholder="请输入"
          show-word-limit
          type="textarea"
      />
    </div>
    <div class="item">
      <span>个人邀请码：</span>
      <el-button
          type="text"
          class="btn"
          :data-clipboard-text="{invitationCode}"
          @click="copy"
      >ASDFGH</el-button>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  name: "Personal",
  data() {
    return {
      textarea: '',
      invitationCode: 'ASDFGH',

    }
  },
  methods: {
    copy: function() {
      var clipboard = new Clipboard(".btn"); //单页面引用
      // eslint-disable-next-line no-unused-vars
      clipboard.on("success", e => {
        // 释放内存
        clipboard.destroy();
      });
      // eslint-disable-next-line no-unused-vars
      // clipboard.on("error", e => {
      //   // 不支持复制
      //   this.$message({
      //     message: "该浏览器不支持自动复制",
      //     type: "warning"
      //   });
      //   // 释放内存
      //   clipboard.destroy();
      // });
    },
  }
}
</script>

<style scoped>
.ke {
  display: flex;
  width: 400px;
  justify-content: center;
  margin-left: 570px;
}

#IntegralRecord {
  margin-left: 15px;
}
</style>
